import 'package:amplatzer/services/ScreenAdapter.dart';
import 'package:flutter/material.dart';

import 'Home.dart';
import 'Friend.dart';
import 'Topic.dart';
import 'Mine.dart';


class Tabs extends StatefulWidget {
  Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  TextStyle _toolBarTextStyle = TextStyle(
    color: Colors.black,
    fontSize: ScreenAdapter.height(28)
  );
  bool _toolBarCenterTitle = true;
  Color _toolBarBackgroundColor = Color(0xFFC6D4E3);
  double _toolBarElevation = ScreenAdapter.height(5);

  // 页面相关数据
  List<Map> _pageList = [{
      "page": HomePage(),
      "titleText": "首页",
      "hasRightButton": true,
      "bottomNavIcon": Icon(Icons.home),
    },
    {
      "page": FriendPage(),
      "titleText": "好友",
      "hasRightButton": true,
      "bottomNavIcon": Icon(Icons.people),
    },
    {
      "page": TopicPage(),
      "titleText": "话题",
      "hasRightButton": true,
      "bottomNavIcon": Icon(Icons.message),
    },
    {
      "page": MinePage(),
      "titleText": "我的",
      "hasRightButton": false,
      "bottomNavIcon": Icon(Icons.people),
    },
  ];

  // 下拉 DropDownButton 数据
  Map<String, Map> _dropDownMap = {
    "0": { // 必须是字符串
      "text": "扫一扫",
      "icon": Icon(Icons.photo, color: Color(0xFFC6D4E3)),
      "onSelected": (BuildContext context) {  // 点击方法
        return (value) {
          Navigator.pushNamed(context, "/scan");
        };
      }
    },
    "1": { // 必须是字符串
      "text": "发布话题",
      "icon": Icon(Icons.message_outlined, color: Color(0xFFC6D4E3)),
      "onSelected": (BuildContext context) {  // 点击方法
        return (value) {
          Navigator.pushNamed(context, "/scan");
        };
      }
    },
    "2": { // 必须是字符串
      "text": "打赏",
      "icon": Icon(Icons.money, color: Color(0xFFC6D4E3)),
      "onSelected": (BuildContext context) {  // 点击方法
        return (value) {
          Navigator.pushNamed(context, "/scan");
        };
      }
    },
  };

  List<PopupMenuItem<String>> _popupMenuButtonitemBuilder () {
    // 创建菜单弹出下拉框
    return this._dropDownMap.keys.map((String value) {
      return new PopupMenuItem<String>(
        value: value,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            this._dropDownMap[value]?["icon"],
            Text(this._dropDownMap[value]?["text"]),
          ],
        ),
      );
    }).toList();
  }

  AppBar _createAppBar (BuildContext context, String titleText, bool hasAction) {
    // 创建顶部AppBar
    return AppBar(
      title: Text(titleText, style: this._toolBarTextStyle),
      centerTitle: this._toolBarCenterTitle,
      backgroundColor: this._toolBarBackgroundColor,
      elevation: this._toolBarElevation,
      actions: hasAction ? [
        IconButton(
          icon: Icon(Icons.search, color: Colors.black),
          onPressed: () {
            Navigator.pushNamed(context, "/search");
          },
        ),
        PopupMenuButton(
          icon: Icon(Icons.add, color: Colors.black),
          onSelected: (String value) {
            this._dropDownMap[value]?["onSelected"](context)(value);
          },
          offset: Offset(0, 60),
          itemBuilder: (BuildContext context) =>this._popupMenuButtonitemBuilder(),
        ),
      ]: null,
    );
  }

  List<BottomNavigationBarItem> _createNavigationBarItemList () {
    // 创建底部导航菜单
    List<BottomNavigationBarItem> itemList = [];
    this._pageList.forEach((value){
      itemList.add(BottomNavigationBarItem(
        icon: value["bottomNavIcon"],
        label: value["titleText"],
      ));
    });
    return itemList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: this._createAppBar(
          context,
          this._pageList[this._currentIndex]["titleText"],
          this._pageList[this._currentIndex]["hasRightButton"],
        ),
        body: this._pageList[this._currentIndex]["page"],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex, // 当前索引
          onTap: (index) {  // 改变页面索引
              setState(() {
                this._currentIndex = index;
              });
          },
          type: BottomNavigationBarType.fixed, // 显示多个菜单(重要)
          fixedColor: Colors.red, // 选中的颜色
          items: this._createNavigationBarItemList(), // 底部导航菜单
        ),
      );
  }
}